<!DOCTYPE html>

<html>

	<head>
		
		<!-- Title -->
		<title>Blog Article - CheerApp HTML Template Demo</title>
		
		<!-- Meta tags -->
		<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/light-blue.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" />
		
		<!-- JavaScript -->
		<script src="js/forms.js" type="text/javascript"></script>
		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
		<script src="js/royal.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			document.documentElement.className += 'js-ready';
		
			H5F.listen(window,"load",function () {
				H5F.setup(document.getElementById("comment-form"), {
    				validClass: "valid",
    				invalidClass: "invalid",
    				requiredClass: "required",
    				placeholderClass: "placeholder"
				});
			},false);
		</script>		
		
		<!-- IE scripts and stylesheets -->
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<script src="js/iefixes.js" type="text/javascript"></script>
		<![endif]-->
		
		
	
	</head>
	
	
	<body>
	
		<div id="wrap">
		
			<header id="header">
				<div class="inner-wrap clearfix">
				
					<h1 id="logo">
						<a href="index.html">CheerApp - Premium HTML App Template - Demo</a>
					</h1>
					
					<nav class="dropdown">
						<ul id="nav" class="clearfix">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="#">Features</a>
								<ul>
									<li><a href="4-column-pricing.html">Pricing&nbsp;tables</a>
										<ul>
											<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
											<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
											<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
										</ul>
									</li>
									<li><a href="wiki.html">Knowledgebase</a>
										<ul>
											<li><a href="wiki-single.html">Single&nbsp;article</a></li>
											<li><a href="wiki.html">Archive</a></li>
										</ul>
									</li>
									<li><a href="register.html">Registration&nbsp;Form</a></li>
									<li><a href="elements.html">Styling&nbsp;demos</a></li>
								</ul>
							</li>
							<li><a href="wiki.html">Knowledgebase</a>
								<ul>
									<li><a href="wiki-single.html">Single&nbsp;article</a></li>
									<li><a href="documentation/index.html">Documentation</a></li>
									<li><a href="contact.html">Contact&nbsp;support</a></li>
								</ul>
							</li>
							<li><a href="4-column-pricing.html">Pricing</a>
								<ul>
									<li><a href="3-column-pricing.html">Three&nbsp;columns</a></li>
									<li><a href="4-column-pricing.html">Four&nbsp;columns</a></li>
									<li><a href="5-column-pricing.html">Five&nbsp;columns</a></li>
								</ul>
							</li>
							<li><a href="blog.html">Blog</a>
								<ul>
									<li><a href="blog-single.html">Single&nbsp;post</a></li>
									<li><a href="blog.html">Monthly&nbsp;archives</a></li>
								</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul><!-- end #nav -->
					</nav>
					
					<div class="login">
						
						<!-- Use "user-info" div once the user has logged in and hide the login/register links and login form -->
						<!--						
						<div class="user-info">
							<p>Logged in as <span class="username">Username</span> <a class="logout" href="#">(logout)</a></p>
						</div>
						-->
						
						<ul class="login-links">
							<li><a href="register.html">Register</a></li>
							<li><a class="login-link" href="#">Login</a></li>
						</ul><!-- end .login-links -->
						
						<form id="login-form" method="post" action="#">
						
							<p>
								<label for="username">Username</label>
								<input name="username" value="" id="username" type="text" required placeholder="Username" />
							</p>
							<p>
								<label for="password">Password</label>
								<input name="password" value="" id="password" type="password" required placeholder="Password" />
							</p>
							<p class="forgot"><a href="#">Forgot?</a></p>
							<p>
								<input class="login-submit" type="submit" value="Login" name="submit" />
							</p>
						
						</form>
						
					</div><!-- end #login -->
					
				</div><!-- end .inner-wrap -->
			</header><!-- end header -->
			
			
			<div id="featured">
				<div class="inner-wrap">
				
					<div class="breadcrumb">
						<h2>
							Blog
						</h2>
					</div>
					
					<form id="searchform" method="get" action="search.html" class="clearfix">
						<p>
							<input type="text" value="" name="s" id="s" placeholder="Start searching..." autocomplete="off" />
						</p>
						<p>
							<input type="submit" id="searchsubmit" value="" />
						</p>
					</form>
				
				</div><!-- end .inner-wrap -->
			</div><!-- end #featured -->
			
			
			<div id="main" class="blog">
				<div class="inner-wrap clearfix">
				
					<div class="content content-left">
					
						<article class="post post-blog clearfix">
						
							<h1 class="post-title"><a href="blog-single.html">Who Rick-rolled Barrack Obama: The Beginning</a></h1>
							<div class="post-image">
								<a rel="prettyPhoto[gallery]" href="#">
									<img src="assets/placeholder-615x140.png" width="615" height="140" alt="Post Image" />
								</a>
							</div>
							<div class="post-meta">
								<span class="date">14 April 2011</span>
								<a class="comment-count" href="#comment-list">2</a>
								<ul class="categories-list">
									<li><a href="#">Web design</a></li>
									<li><a href="#">News</a></li>
								</ul>
							</div><!-- end .post-meta -->
							<div class="post-content">
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
								</p>
								<p>
									<blockquote>
										Donec a elit nunc, at posuere quam. Duis rhoncus dui leo. Pellentesque eu risus nec ante pharetra interdum id vitae urna. Lorem ipsum dolor sit amet.
									</blockquote>
									Sed tempus, sapien eu pellentesque porttitor, purus sem placerat lorem, eu mattis arcu nibh vel mi. Morbi nisl augue, sodales sit amet commodo sit amet, condimentum at dolor. Aenean commodo, arcu et posuere sodales, nulla purus accumsan mi, mattis tincidunt velit felis vel erat. Nam sapien diam, cursus ut eleifend nec, rutrum sit amet enim. Cras consectetur posuere lacus, eget convallis erat dignissim cursus. Sed eu sem ac velit molestie egestas. Aenean consectetur felis auctor nisi ullamcorper pretium. In consectetur felis ut quam molestie rhoncus.
								</p>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tempus, sapien eu pellentesque porttitor, purus sem placerat lorem, eu mattis arcu nibh vel mi. Morbi nisl augue, sodales sit amet.
								</p>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<h4>An image followed by &lt;figcaption&gt;, both inside &lt;figure&gt; element</h4>
								<figure>
									<img src="assets/placeholder-615x140.png" width="615" height="140" alt="Image" />
									<figcaption>Sed tempus, sapien eu pellentesque porttitor, purus sem placerat lorem.</figcaption>
								</figure>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
								</p>
								<h4>&lt;code&gt; wrapped by &lt;pre&gt; element</h4>
								<pre>#main {
	background: transparent url(images/content-texture-top.png) repeat-x 0 0;
	border-top: 1px solid #f2f4f5;
	padding-bottom: 156px; /* Must be the same as footer height */
	
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .15);
	box-shadow: 0 -3px 3px rgba(0, 0, 0, .05);
}</pre>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo. Curabitur turpis risus, venenatis a commodo pellentesque, vulputate et ligula. Cras ipsum massa, placerat ut euismod eu, tempus id ligula. Ut id tristique enim. Ut vel leo at nisl vestibulum tristique quis et velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								</p>
								<p>
									Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a elementum ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
								</p>
							</div><!-- end .post-content -->
							
							<hr />
							
							<div id="respond" class="comment-form-container clearfix">
								<div class="description">
									<h5>Leave a reply</h5>
									<span>You may use these HTML tags and attributes:</span>
									<pre class="allowed-tags">&lt;a href="" title=""&gt;
&lt;abbr title=""&gt;
&lt;acronym title=""&gt;
&lt;b&gt;
&lt;blockquote cite=""&gt;
&lt;cite&gt;
&lt;code&gt;
&lt;del datetime=""&gt;
&lt;em&gt;
&lt;i&gt;
&lt;q cite=""&gt;
&lt;strike&gt;
&lt;strong&gt;</pre>
								</div><!-- end .description -->
								<form id="comment-form" method="post" action="#">
									<p class="comment-form-author">
										<label for="author">Name<small>(required)</small></label>
										<input type="text" size="30" value="" name="author" id="author" required />
									</p>
									<p class="comment-form-email">
										<label for="email">Email<small>(required) (not published)</small></label>
										<input type="email" size="30" value="" name="email" id="email" required />
									</p>
									<p class="comment-form-url">
										<label for="url">Website<small>(optional)</small></label>
										<input type="url" size="30" value="" name="url" id="url" />
									</p>
									<p class="comment-form-comment">
										<textarea aria-required="true" rows="8" cols="45" name="comment" id="comment" required /></textarea>
									</p>
									<p class="button button-mail">
										<input type="submit" id="submit" name="submit" value="Submit" />
										<span class="icon"></span>
									</p>
								</form>
							</div><!-- end .comment-form-container -->
							
							<hr />
							
							<div class="comments clearfix">
								<div class="description">
									<h5>12 comments</h5>
									<span>Lorem ipsum dolor sit amet consectetur</span>
								</div><!-- end description -->
								<ol id="comment-list">
								
									<li class="comment comment-author-admin bypostauthor">
										<div class="comment-body">
											<div class="comment-meta commentmetadata">
												<a href="http://thethemes.eu/preview/distinct/news/why-lorem-ipsum-dolor#comment-5">19 Sep 2010 @ 6:40 am</a>
											</div><!-- end .comment-meta -->
											<div class="comment-author vcard">
												<img width="50" height="50" class="avatar avatar-50 photo" src="assets/placeholder-50x50.png" alt="avatar">
												<p class="commentAuthor"><cite class="fn">admin</cite></p>
											</div><!-- end .comment-author -->
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo.</p>
											<div class="reply">
         										<a href="#respond" class="comment-reply-link">Reply</a>
         									</div><!-- end .reply -->
         								</div><!-- end .comment-body -->
         								
         								<ul class="children">
         									<li class="comment comment-author-admin bypostauthor">
												<div class="comment-body">
													<div class="comment-meta commentmetadata">
														<a href="http://thethemes.eu/preview/distinct/news/why-lorem-ipsum-dolor#comment-5">19 Sep 2010 @ 6:40 am</a>
													</div><!-- end .comment-meta -->
													<div class="comment-author vcard">
														<img width="50" height="50" class="avatar avatar-50 photo" src="assets/placeholder-50x50.png" alt="avatar">
																<p class="commentAuthor"><cite class="fn">admin</cite></p>
													</div><!-- end .comment-author -->
													<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo.</p>
													<div class="reply">
         												<a href="#respond" class="comment-reply-link">Reply</a>
         											</div><!-- end .reply -->
         										</div><!-- end .comment-body -->
         									</li><!-- end .comment -->
         									
         									<li class="comment comment-author-admin bypostauthor">
												<div class="comment-body">
													<div class="comment-meta commentmetadata">
														<a href="http://thethemes.eu/preview/distinct/news/why-lorem-ipsum-dolor#comment-5">19 Sep 2010 @ 6:40 am</a>
													</div><!-- end .comment-meta -->
													<div class="comment-author vcard">
														<img width="50" height="50" class="avatar avatar-50 photo" src="assets/placeholder-50x50.png" alt="avatar">
																<p class="commentAuthor"><cite class="fn">admin</cite></p>
													</div><!-- end .comment-author -->
													<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis. Ut libero dui, ultricies vel pharetra non, aliquam eget leo.</p>
													<div class="reply">
         												<a href="#respond" class="comment-reply-link">Reply</a>
         											</div><!-- end .reply -->
         										</div><!-- end .comment-body -->
         									</li><!-- end .comment -->
         								</ul><!-- end .children -->
         							</li><!-- end .comment -->
         							
									<li class="comment comment-author-admin bypostauthor">
										<div class="comment-body">
											<div class="comment-meta commentmetadata">
												<a href="http://thethemes.eu/preview/distinct/news/why-lorem-ipsum-dolor#comment-5">19 Sep 2010 @ 6:40 am</a>
											</div><!-- end .comment-meta -->
											<div class="comment-author vcard">
												<img width="50" height="50" class="avatar avatar-50 photo" src="assets/placeholder-50x50.png" alt="avatar">
												<p class="commentAuthor"><cite class="fn">pogoking</cite></p>
											</div><!-- end .comment-author -->
											<p>Hmmm…. another test comment? Yep, that’s right! Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
											<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
											<div class="reply">
         										<a href="#respond" class="comment-reply-link">Reply</a>
         									</div><!-- end .reply -->
         								</div><!-- end .comment-body -->
         							</li>
         							
									<li class="comment comment-author-admin bypostauthor">
										<div class="comment-body">
											<div class="comment-meta commentmetadata">
												<a href="http://thethemes.eu/preview/distinct/news/why-lorem-ipsum-dolor#comment-5">19 Sep 2010 @ 6:40 am</a>
											</div><!-- end .comment-meta -->
											<div class="comment-author vcard">
												<img width="50" height="50" class="avatar avatar-50 photo" src="assets/placeholder-50x50.png" alt="avatar">
												<p class="commentAuthor"><cite class="fn">Mateusz Hajdziony</cite></p>
											</div><!-- end .comment-author -->
											<p>Hmmm…. another test comment? Yep, that’s right! Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
											<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
											<div class="reply">
         										<a href="#respond" class="comment-reply-link">Reply</a>
         									</div><!-- end .reply -->
         								</div><!-- end .comment-body -->
         							</li>
								
								</ol>
								
								<div class="pagination clearfix">
									<span class="prev"><a href="#">Older comments</a></span>
									<span class="next"><a href="#">Newer comments</a></span>
								</div><!-- end .pagination -->
							</div><!-- end .comments -->
							
						</article><!-- end .post -->
						
					</div><!-- end .content -->
					
					
					<div class="sidebar">
					
						<div class="widget">
							<h6>Sponsors</h6>
							<div class="widget-content">
								<a href="http://themeforest.net?ref=pogoking" class="ad-link"><img src="assets/tf-125x125.gif" width="125" height="125" alt="TF" class="ad" /></a>
								<a href="http://audiojungle.net?ref=pogoking" class="ad-link"><img src="assets/aj-125x125.gif" width="125" height="125" alt="AJ" class="ad" /></a>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
					
						<div class="widget widget-list">
							<h6>Browse topics</h6>
							<div class="widget-content">
								<ul>
									<li><a href="#">News</a></li>
									<li><a href="#">Operating systems</a></li>
									<li><a href="#">Theme updates</a></li>
									<li><a href="#">Web design</a></li>
									<li><a href="#">Web development</a></li>
									<li><a href="#">WordPress themes</a></li>
								</ul>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
						
						<div class="widget widget-list">
							<h6>Browse archives</h6>
							<div class="widget-content">
								<ul>
									<li><a href="#">April 2011</a></li>
									<li><a href="#">March 2011</a></li>
									<li><a href="#">February 2011</a></li>
									<li><a href="#">January 2011</a></li>
									<li><a href="#">December 2010</a></li>
									<li><a href="#">November 2010</a></li>
								</ul>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
						
						<div class="widget">
							<h6>Little about us</h6>
							<div class="widget-content">
								<p>
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis iaculis urna ut mollis. Praesent est elit, commodo in blandit ut, mollis eu erat. Nullam ac ipsum eget ante suscipit sagittis.
								</p>
							</div><!-- end .widget-content -->
						</div><!-- end .widget -->
					
					</div><!-- end .sidebar -->
					
				</div><!-- end .inner-wrap -->
			</div><!-- end #main -->
		
		</div><!-- end #wrap -->
		
		
		<footer id="footer">
			<div class="inner-wrap">
			
				<nav>
					<ul id="footer-nav" class="clearfix">
						<li><a href="index.html">Home</a></li>
						<li><a href="4-column-pricing.html">Sign up</a></li>
						<li><a href="#">Legal</a></li>
						<li><a href="wiki.html">Support</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
				
				<!-- Set margin-top on logo to negative half of image height (to center it vertically) in CSS (.footer-logo) -->
				<a href="index.html"><img class="footer-logo" src="images/light-blue/logo-small.png" width="107" height="39" alt="logo" /></a>
				
				<small class="copyright">&copy;2011&nbsp;&nbsp;&middot;&nbsp;&nbsp;CheerApp HTML template by <a href="http://themeforest.net/user/pogoking?ref=pogoking">Mateusz Hajdziony</a></small>
			
			</div>
		</footer><!-- end footer -->
	
	</body>

</html>